<template>
   <div class="center">
    <div class="center-form">
          <el-form inline  @submit.native.prevent label-width="120px">
            <el-form-item label="商品名称">
              <el-input v-model="getData.productName" placeholder="请输入商品名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="商户名称">
              <el-input v-model="getData.merchantName" placeholder="请输入商户名称" clearable class="selWidth" size="small" />
            </el-form-item>
            <el-form-item label="商品状态">
              <el-select v-model="getData.productStatus" placeholder="请选择">
                  <el-option
                    v-for="item in productStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
               </el-select>
            </el-form-item>
            <el-form-item label=" ">
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="initList"
                >搜索</el-button>
              <el-button icon="el-icon-refresh" type="primary" @click="resetList"
                >重置</el-button>
            </el-form-item>
          </el-form>
          <div class="center-construct">
            <el-button type="primary" style="margin-right: 10px;" :loading="dataLoading" @click="dataSynchronize">数据同步</el-button>
            <el-button type="primary" v-if="rolesId == 1 || rolesId == 8 "  @click="addShopdialogClick">新增商品</el-button>
        </div>
        <div class="center-table">
            <el-table
            :data="tableList"
            tooltip-effect="dark"
            style="width: 100%"
            height="60vh"
            stripe
            :header-cell-style="tableHeaderColor"
         >
        <el-table-column
            prop="productNo"
            label="产品编号"
            align="center"
            width="180"
          />
          <el-table-column
            prop="merchantName"
            label="商户名称"
            align="center"
            width="120"
          />
          <el-table-column
            prop="subscriptionType"
            label="订购类型"
            align="center"
            width="120"
          >
          <template slot-scope="scope">
            <p v-if="scope.row.subscriptionType == 'DISCOUNT_TIME'"> 次卡 </p>
            <p v-if="scope.row.subscriptionType == 'DISCOUNT_WEEK'"> 周卡 </p>
            <p v-if="scope.row.subscriptionType == 'DISCOUNT_MONTH'"> 月卡 </p>
          </template>
          </el-table-column>
          <el-table-column
            prop="merchantPid"
            label="商户PID"
            align="center"
            width="150"
          />
          <el-table-column
            prop="productName"
            label="商品名称"
            align="center"
            width="120"
          />
          <el-table-column
            label="商品图片"
            align="center"
            width="200"
          >
          <template slot-scope="scope">
              <el-image 
                style="width: 100px; height: 100px"
                :src="scope.row.productCoverPicUrl" 
                :preview-src-list="[scope.row.productCoverPicUrl]">
              </el-image>
          </template>
          </el-table-column>
          <el-table-column
            prop="periods"
            label="期数"
            align="center"
            width="120"
          />
          <el-table-column
            prop="deductionAmount"
            label="单价"
            align="center"
            width="120"
          />
          <el-table-column
            prop="productDiscountPrice"
            label="总价"
            align="center"
            width="120"
          />
          <el-table-column
            prop="shopNameList"
            label="适用门店"
            align="center"
            width="200"
            show-overflow-tooltip
          />
          <el-table-column
            prop="moreUseMoreDiscount"
            label="是否越用越优惠"
            align="center"
            width="120"
          >
          <template slot-scope="scope">
              <p>{{ scope.row.moreUseMoreDiscount == 'YES' ? '是' : '否' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="productStatus"
            label="状态"
            align="center"
            width="120"
            fixed="right"
           >
            <template slot-scope="scope">
              <p>{{ funProductStatus(scope.row.productStatus) }}</p>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.productStatus == 'WAIT_UP' && (rolesId == 1 || rolesId == 8) "
                type="text"
                @click="shelvesProduct(scope.row)"
                >上架</el-button>
                <el-button
                v-if="scope.row.productStatus == 'PRODUCT_UP' && (rolesId == 1 || rolesId == 8) "
                type="text"
                @click="offShelvesProduct(scope.row)"
                >下架</el-button>
                <el-button
                v-if="scope.row.productStatus == 'WAIT_UP' && (rolesId == 1 || rolesId == 8) "
                type="text"
                @click="upDataProduct(scope.row)"
                >编辑</el-button>
              <el-button
                type="text"
                @click="checkProducrInfo(scope.row)"
                >查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="sizechange"
          :page-size="getData.size"
          :current-page.sync="getData.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
     </div>
    </div>
    <el-dialog
         :title="shopDialogTitle"
         :visible.sync="shopVisible"
         width="800px"
         >
          <div class="construct-dialog">
            <el-form :model="shopForm" inline :rules="shopFormRules" ref="shopForm" label-width="120px" >
                <el-form-item label="商户名称" prop="merchantPid">
                  <el-select   :disabled="shopForm.productNo" v-model="shopForm.merchantPid"  filterable placeholder="请选择商户" >
                    <el-option
                      v-for="item in merchantList"
                      :key="item.smid"
                      :label="item.merchantName"
                      :value="item.smid">
                    </el-option>
                  </el-select>
                   <!-- <el-input :disabled="shopForm.productNo" v-model="shopForm.merchantPid" placeholder="请输入商户PID"></el-input> -->
               </el-form-item>
               <el-form-item label="订购类型" prop="subscriptionType">
                 <el-select :disabled="shopForm.productNo" v-model="shopForm.subscriptionType" placeholder="请选择">
                   <el-option label="月卡" value="DISCOUNT_MONTH"></el-option>
                   <el-option label="周卡" value="DISCOUNT_WEEK"></el-option>
                   <el-option label="次卡" value="DISCOUNT_TIME"></el-option>
                 </el-select>
               </el-form-item>
               <el-form-item  label="商品名称" prop="productName" style="width:100%;">
                   <el-input :disabled="shopForm.disabled" v-model="shopForm.productName" placeholder="请输入商品名称"></el-input>
               </el-form-item>
               <el-form-item label="商品封面图" prop="productCoverPicUrl" >
                <el-upload
                  :disabled="shopForm.disabled"
                  :show-file-list="false"
                  :before-upload="shopCoverBefore"
                  >
                  <img v-if="shopForm.productCoverPicUrl" :src="shopForm.productCoverPicUrl" class="avatar">
                  <i v-else class="el-icon-plus"></i>
                </el-upload>
               </el-form-item>
               <el-form-item label="商品详情图" prop="detailUrl">
                <el-upload
                :action="uploadUrl"
                :disabled="shopForm.disabled"
                :headers="token"
                  :show-file-list="false"
                  :on-success="detailSuccess"
                  >
                  <img v-if="shopForm.detailUrl" :src="shopForm.detailUrl" class="avatar">
                  <i v-else class="el-icon-plus"></i>
                </el-upload>
               </el-form-item>
               <!-- saleStartTime saleEndTime  -->
               <el-form-item label="售卖时间" props="saleTimeList"> 
                <el-date-picker
                   @change="saleTimeListChange"
                   format="yyyy-MM-dd ss:ss:ss"
                   value-format="yyyy-MM-dd HH:mm:ss"
                   :disabled="shopForm.disabled"
                   style="width:550px"
                   v-model="shopForm.saleTimeList"
                   type="datetimerange"
                   range-separator="至"
                   start-placeholder="请选择售卖开始时间"
                   end-placeholder="请选择售卖结束时间">
                 </el-date-picker>
               </el-form-item>
               <el-form-item label="越用越优惠" prop="moreUseMoreDiscount" style="width:100%;">
                <el-select  :disabled="shopForm.disabled" v-model="shopForm.moreUseMoreDiscount" @input="moreUseInput" placeholder="请选择">
                  <el-option label="是" value="YES"></el-option>
                  <el-option label="否" value="NO"></el-option>
                </el-select>
               </el-form-item>
               <el-form-item label="原价" prop="originalPrice">
                    <el-input :disabled="shopForm.disabled" v-model="shopForm.originalPrice" placeholder="请输入原价"></el-input>
                 </el-form-item>
                 <el-form-item label="有效期" prop="expiryDate" v-if="shopForm.subscriptionType == 'DISCOUNT_TIME'">
                    <el-input :disabled="shopForm.disabled" v-model="shopForm.expiryDate" placeholder="请输入有效期">
                      <template slot="append">天</template>
                    </el-input>
                 </el-form-item>
               <div v-if="shopForm.moreUseMoreDiscount == 'NO'">
                 <el-form-item label="单价" prop="deductionAmount">
                    <el-input :disabled="shopForm.disabled" v-model="shopForm.deductionAmount" placeholder="请输入现单价"></el-input>
                 </el-form-item>
                 <el-form-item :label="shopForm.subscriptionType == 'DISCOUNT_TIME'?'次数':'期数'" prop="periods">
                    <el-input :disabled="shopForm.disabled" v-model="shopForm.periods" :placeholder="shopForm.subscriptionType == 'DISCOUNT_TIME'?'请输入次数':'请输入期数'"></el-input>
                 </el-form-item>
                 <el-form-item :label="shopForm.subscriptionType == 'DISCOUNT_TIME'?'前N次单价':'前N期单价'"  prop="downPayment">
                    <el-input :disabled="shopForm.disabled" v-model="shopForm.downPayment" placeholder="请输入原单价"></el-input>
                 </el-form-item>
                 <el-form-item :label="shopForm.subscriptionType == 'DISCOUNT_TIME'?'前N次次数':'前N期期数'"  prop="downPaymentPeriods">
                    <el-input :disabled="shopForm.disabled" v-model="shopForm.downPaymentPeriods" placeholder="请输入原单价"></el-input>
                 </el-form-item>
               </div>
               
               <div v-else> 
                  <el-form-item :label="shopForm.subscriptionType == 'DISCOUNT_TIME'?'次数':'期数'" prop="periods">
                      <el-input :disabled="shopForm.disabled" v-model="shopForm.periods" :placeholder="shopForm.subscriptionType == 'DISCOUNT_TIME'?'请输入次数':'请输入期数'"></el-input>
                   </el-form-item>
                   <div v-if="(shopForm.periods * 1) > 0 &&  shopForm.moreUseMoreDiscount == 'YES'"> 
                     <el-form-item >
                       <div  style="margin-bottom: 20px;margin-left: 30px;font-size: 14px;color: #606266;display:flex;align-items:center;white-space: nowrap;" v-for="(item,index) in shopForm.periods * 1"> <span style="margin-right: 13px"> {{`第${ index + 1 }期数价格`}} </span> <el-input @input="onInputPeriod" :disabled="shopForm.disabled" v-model="shopForm.perPeriodPriceArray[index]" placeholder="请输入期数价格"></el-input> </div>  
                     </el-form-item>
                   </div>
               </div>
               <el-form-item label="允许解约期数" v-if="shopForm.subscriptionType != 'DISCOUNT_TIME'">
                <el-input-number :disabled="shopForm.disabled" v-model="shopForm.allowSurrenderPeriods" placeholder="请输入" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
                <p class="termination-tips">在解约期数后可自助取消,无需联系商户</p> 
              </el-form-item>
              <el-form-item label="扣款时间模式" prop="cycleChargeType" v-if="shopForm.subscriptionType != 'DISCOUNT_TIME'">
                  <el-radio-group :disabled="shopForm.disabled" v-model="shopForm.cycleChargeType" @input="cycleInput">
                    <el-radio label="FIXED_DATE">商家指定的固定日期</el-radio>
                    <el-radio label="USER_DESIGN">用户指定的固定天数</el-radio>
                    <el-radio label="FIXED_DAYS">商家指定固定扣款天数</el-radio>
                  </el-radio-group>
               </el-form-item>
               <el-form-item label="商户指定日期"  prop="deductionDays" v-if="shopForm.cycleChargeType == 'FIXED_DATE' && shopForm.subscriptionType != 'DISCOUNT_TIME'">
                 <el-input :disabled="shopForm.disabled" placeholder="请输入" type="number" v-model="shopForm.deductionDays">
                   <template slot="prepend">每月</template>
                   <template slot="append">日</template>
                 </el-input>              
               </el-form-item>
               <el-form-item  label="首期扣款天数（距开卡当天）" label-width="220px"  prop="deductionDays" v-if="shopForm.cycleChargeType == 'USER_DESIGN' && shopForm.subscriptionType != 'DISCOUNT_TIME'">
                  <el-input :disabled="shopForm.disabled" placeholder="请输入" type="number" v-model="shopForm.deductionDays">
                   <template slot="append">日</template>
                  </el-input> 
               </el-form-item>
               <el-form-item  label="商家指定天数（距开卡当天）" label-width="220px" prop="deductionDays" v-if="shopForm.cycleChargeType == 'FIXED_DAYS' && shopForm.subscriptionType != 'DISCOUNT_TIME'">
                <el-input :disabled="shopForm.disabled" placeholder="请输入" type="number" v-model="shopForm.deductionDays">
                   <template slot="append">日</template>
                  </el-input>  
               </el-form-item>
               <el-form-item label="商品描述" prop="description" style="width:100%">
                  <el-input :disabled="shopForm.disabled" type="textarea" :rows="3" v-model="shopForm.description" style="width:550px" placeholder="请输入商品描述"></el-input>
               </el-form-item>
               <el-form-item label="使用规则" v-for="(item , index) in shopForm.purchaseNotesList" :key="index" :prop="`purchaseNotesList[${index}].rule`" style="width:100%">
                  <el-input :disabled="shopForm.disabled" type="textarea" maxlength="100" :rows="3" v-model="shopForm.purchaseNotesList[index].rule" style="width:550px" placeholder="请输入使用规则"></el-input>
                  <i @click="ruleInputCloseClick(index)" v-if="shopForm.purchaseNotesList.length > 1" class="el-icon-delete"></i>
               </el-form-item>
               <el-form-item label=" "  style="width:100%" v-if="shopForm.purchaseNotesList.length<7">
               <el-button :disabled="shopForm.disabled" @click="addRuleInputClick" type="text" icon="el-icon-plus">添加规则</el-button>
              </el-form-item>
               <el-form-item label="适用门店" prop="applicableShopsArr" style="width:100%">
                <el-select multiple  :disabled="shopForm.disabled" v-model="shopForm.applicableShopsArr" style="width:550px" filterable placeholder="请选择" style="width:550px">
                    <el-option
                      v-for="item in storeList"
                      :key="item.shopId"
                      :label="item.shopName"
                      :value="item.shopId">
                    </el-option>
                  </el-select>
               </el-form-item>
            </el-form>
          </div>
         <span slot="footer" class="dialog-footer" v-if="!shopForm.disabled">
           <el-button @click="shopVisible = false">取 消</el-button>
           <el-button type="primary" @click="shopFormStatusClick" v-loading="shopLoading">确 定</el-button>
         </span>
       </el-dialog>
   </div>
</template>
<script>
import { simpleCreateQuery , shopQueryList , updateStatus , synInfoProduct , productPage , logoUpload , saveOrUpdate} from "@/api/fetchApi"

export default {
    data(){
        return{
            uploadUrl: process.env.VUE_APP_BASE_URL + "/product/v31/api/merchant/uploadfile/upload",
            token: { token: sessionStorage.getItem("token") },
            getData:{
                page:1,
                size:10
            },
            shopVisible:false,
            shopDialogTitle:'新增商品',
            shopForm:{
                merchantPid:'',
                // subscriptionType:'MONTH',
                moreUseMoreDiscount:'NO',
                deductionDays:'',
                purchaseNotesList:[{rule:''}]
            },
            shopFormRules:{
                merchantPid:[{ required: true, message: '请选择商户', trigger: 'change' }],
                subscriptionType:[{ required: true, message: '请选择订购类型', trigger: 'change' }],
                productName:[{ required: true, message: '请输入商品名称', trigger: 'blur' }],
                productCoverPicUrl:[{required: true, validator:(rule , value , callback)=>{
                    if(this.shopForm.productCoverPicUrl){
                        callback();
                    }else{
                        callback(new Error('请上传商品封面图！'));
                    }
                 } }],
                 detailUrl:[{required: true, validator:(rule , value , callback)=>{
                    if(this.shopForm.productCoverPicUrl){
                        callback();
                    }else{
                        callback(new Error('请上传商品详情图！'));
                    }
                 } }],
                 saleTimeList:[{required: true, validator:(rule , value , callback)=>{
                    if(this.shopForm.saleEndTime && this.shopForm.saleStartTime){
                        callback();
                    }else{
                        callback(new Error('请选择售卖时间！'));
                    }
                 } }],
                 moreUseMoreDiscount:[{ required: true, message: '请选择', trigger: 'change' }],
                 deductionAmount:[{ required: true, message: '请输入单价', trigger: 'blur' }],
                 originalPrice:[{ required: true, message: '请输入原价', trigger: 'blur' }],
                 expiryDate:[{ required: true, message: '请输入有效期', trigger: 'blur' }],
                 periods:[{ required: true, message: '请输入期数', trigger: 'blur' }],
                 downPaymentPeriods:[{ required: this.downPaymentStatus, message: '请输入前N期期数', trigger: 'blur' }],
                 downPayment:[{ required: this.downPaymentStatus, message: '请输入前N期单价', trigger: 'blur' }],
                 description:[{ required: true, message: '请输入商品描述', trigger: 'blur' }],
                 'purchaseNotesList[0].rule':[{ required: true, message: '请输入使用规则', trigger: 'blur' }],
                 applicableShopsArr:[{ required: true, message: '请输入适用门店', trigger: 'blur' }],
                 cycleChargeType:[{ required: true, message: '请选择扣款时间模式', trigger: 'change' }],
                 deductionDays:[{ required: true, message: '请输入', trigger: 'blur' },
                 {required: true,trigger: 'blur', validator:(rule , value , callback)=>{
                        if(this.shopForm.cycleChargeType == 'FIXED_DATE'){
                            if(value<=28 && value>=1){
                                callback();
                            }else{
                               callback(new Error('日期必须大于等1，小于等于28'));
                            }
                           console.log(value)
                        }else if( this.shopForm.cycleChargeType == 'USER_DESIGN' ){
                          if(value<=26 && value>=1){
                                callback();
                            }else{
                               callback(new Error('天数必须大于等1，小于等于26'));
                            }
                        }else if( this.shopForm.cycleChargeType == 'FIXED_DAYS' ){
                          if(value<=60 && value>=1){
                                callback();
                            }else{
                               callback(new Error('天数必须大于等1，小于等于60'));
                            }
                        }
                 } }              
                 ]
            },
            dataLoading:false,
            downPaymentStatus:false,
            total:0,
            tableList:[],
            productStatusList:[{label:'全部',value:''},{label:'已上架',value:'PRODUCT_UP'},{label:'待上架',value:'WAIT_UP'},{label:'已下架',value:'PRODUCT_DOWN'}],
            rolesId:'',
            storeList:[],
            shopLoading:false,
            merchantList:[]
        }
    },
    mounted(){
        this.initList()
        this.initSimpleCreateQuery()
        this.initAuthority()
        this.initStoreList()
    },
    methods:{
       async  initList(){
          const res = await  productPage(this.getData)
          res.data.forEach((item,index)=>{
            if(item.perPeriodPriceArray){
              item.perPeriodPriceArray =  item.perPeriodPriceArray.split(';')
            }
            if(item.applicableShopInfoList && index !=4){
              item.applicableShopInfoList = JSON.parse(item.applicableShopInfoList)
              item.applicableShopInfoList.forEach((shopItem,index)=>{
                if(index == 0){
                  item.applicableShops = shopItem.shopId
                  item.shopNameList = shopItem.shopName
               }else{
                item.applicableShops = item.applicableShops + ',' + shopItem.shopId
                item.shopNameList = item.shopNameList + ',' + shopItem.shopName
                }
              }) 
            }
          })
          this.tableList = res.data
          this.total = res.pageInfo.recordCount
        },
        async initSimpleCreateQuery(){
           this.merchantList = []
           const res =  await simpleCreateQuery({page:1,size:999999})
           this.total = res.pageInfo.recordCount
           res.data.forEach(item=>{
             this.merchantList.push(item.cycleMerchantDO)
          })
        },
        initAuthority(){
          let userinfo = JSON.parse(sessionStorage.getItem("userInfo"))
          this.rolesId = userinfo.rolesId
        },
        async initStoreList(){
          this.storeList = []
          const res = await shopQueryList({page:1,size:999999})
          this.storeList = res.data
          console.log(this.storeList)
        },
       async shopFormStatusClick(){
          
            this.shopForm.applicableShops = this.shopForm.applicableShopsArr.join(',')
            const valid  = await this.$refs.shopForm.validate()
            if(valid){
                //处理数据 
                 this.shopForm.purchaseNotesList.forEach((item,index)=>{
                   if(!item.rule){
                     this.shopForm.purchaseNotesList.splice(index , 1)
                   }
                })
                this.shopLoading = true
                this.shopForm = await this.removeEmptyValues(this.shopForm)
                const res = await saveOrUpdate(this.shopForm)
                if(res.result_code == "SUCCESS"){
                this.$message.success('操作成功！')
                this.shopLoading = false
                this.shopVisible = false
                this.initList()
             }else{
                this.shopLoading = false
                this.$message.error(res.return_msg || res.message)
             }
            }
        },
        saleTimeListChange(v){
          this.shopForm.saleStartTime = v[0]
          this.shopForm.saleEndTime = v[1]
        },
        addShopdialogClick(){
            this.shopVisible = true
            this.shopDialogTitle = '新增商品'
            this.shopForm = {
                merchantPid:'',
                subscriptionType:'',
                moreUseMoreDiscount:'NO',
                purchaseNotesList:[{rule:''}]
            }
            this.$nextTick(()=>{
              this.$refs.shopForm.clearValidate()
            })
        },
        moreUseInput(v){
          this.shopForm.perPeriodPriceArray = []
          if(v == 'YES'){
             this.shopForm.deductionAmount = ''
             this.shopForm.downPaymentPeriods = ''
             this.shopForm.downPayment = ''
          }
        },
        onInputPeriod(){
          this.$forceUpdate()
        },
        ruleInputCloseClick(index){
            this.shopForm.purchaseNotesList.splice(index , 1)
        },
        detailSuccess(response){
            this.shopForm.detailUrl = response.data.filePath
            this.$forceUpdate()
        },
        shopCoverBefore(file){
          const that = this
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = e => {
          const base64 = e.target.result
           logoUpload({picData:base64}).then(res=>{
            that.shopForm.productCoverPicUrl = res.pictureUrl
            that.$forceUpdate()
             })
        // this.uploadAction = base64 // 将Base64字符串作为action传递
          }
        return false;
        },
        async upDataProduct(v){
          this.shopForm =  JSON.parse(JSON.stringify(v))
          this.shopDialogTitle = '编辑商品'
          this.shopForm.purchaseNotesList = this.shopForm.purchaseNotesList.split(';')
          this.shopForm.applicableShopsArr = this.shopForm.applicableShops.split(',')
          const arr = []
          this.shopForm.purchaseNotesList.forEach(item=>{
            arr.push({rule:item})
          })
          console.log(this.shopForm.purchaseNotesList)
          if(this.shopForm.saleStartTime){
            this.shopForm.saleTimeList = [this.shopForm.saleStartTime , this.shopForm.saleEndTime]
          }
          this.shopForm.purchaseNotesList = arr
          this.shopForm = await this.removeEmptyValues(this.shopForm)
          this.shopVisible = true
          console.log(this.shopForm)
          
        },
        removeEmptyValues(obj) {
         return Object.keys(obj)
           .filter(key => obj[key] !== null && obj[key] !== undefined && obj[key] !== '' && obj[key]!='0')
           .reduce((acc, key) => {
             acc[key] = obj[key];
             return acc;
           }, {});
         },
        checkProducrInfo(v){
          this.shopForm =  JSON.parse(JSON.stringify(v))
          this.shopDialogTitle = '查看商品'
          this.shopForm.purchaseNotesList = this.shopForm.purchaseNotesList.split(';')
          this.shopForm.applicableShopsArr = this.shopForm.applicableShops.split(',')
          const arr = []
          this.shopForm.purchaseNotesList.forEach(item=>{
            arr.push({rule:item})
          })
          if(this.shopForm.saleStartTime){
            this.shopForm.saleTimeList = [this.shopForm.saleStartTime , this.shopForm.saleEndTime]
          }
          this.shopForm.purchaseNotesList = arr
          this.shopForm.disabled = true
          this.shopVisible = true
        },
        async dataSynchronize(){
              this.dataLoading = true
              const res = await synInfoProduct({pageNumber:1,pageSize:100})
              if(res.code == '200'){
                this.dataLoading = false
                this.$message.success('同步成功')
                this.initList()
              }else{
                this.dataLoading = false
                this.$message.error(res.msg)
              }
        },
        async shelvesProduct(v){
              const confirm = await  this.$confirm('当前是否确认上架?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
              })
              if(confirm){
                  const res = await updateStatus({productNoList:[v.productNo],merchantPid:v.merchantPid,productStatus:'PRODUCT_UP'})
                  if(res.result_code == 'SUCCESS'){
                    this.$message.success('上架成功！')
                    this.initList()
                  } else{
                    this.$message.error(res.return_msg)
                  }  
              }
        },
        async offShelvesProduct(v){
          const confirm = await  this.$confirm('当前是否确认下架,下架之后无法重新上架?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
              })
              if(confirm){
                const res = await updateStatus({productNoList:[v.productNo],merchantPid:v.merchantPid,productStatus:'PRODUCT_DOWN'})
                  if(res.result_code == 'SUCCESS'){
                    this.$message.success('下架成功！')
                    this.initList()
                  } else{
                    this.$message.error(res.return_msg)
                  }  
              }
        },
        resetList(){
           this.getData = {
                page:1,
                size:10
            }
            this.initList()
        },
        addRuleInputClick(){
           this.shopForm.purchaseNotesList.push({rule:''})
        },
        
        cycleInput(v){
          //  this.shopForm.deductionDays = ''
           this.$refs.shopForm.validateField('deductionDays')
        },
        funProductStatus(v){
           const data =  this.productStatusList.find(item =>item.value == v)
           return data.label
        },
        handleCurrentChange(val) {
          this.getData.page = val;
          this.initList()
      },
      sizechange(val) {
          this.getData.size = val;
          this.initList()
      },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
          }
       }
    }
}
</script>

<style scoped>
.center{
    width: calc(100% - 40px);
    height: calc(100% - 30px);
    background-color: #fff;
    padding-top: 30px;
    padding:30px 20px 0 20px;
}
.center-form{
  padding: 0 22px;
}

.center-construct{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}

.construct-dialog{
    height: 60vh;
    overflow-y: auto;
}

.avatar{
    width:160px;
    height:160px;
}
/* 针对 Firefox */
.construct-dialog {
  scrollbar-width: none; /* Firefox */
}
 
/* 针对 Chrome, Edge 和 Safari */
.construct-dialog::-webkit-scrollbar {
  width: 0; /* Chrome, Edge 和 Safari */
}
 
/* 针对 IE 10+ */
.construct-dialog {
  -ms-overflow-style: none;  /* IE 10+ */
}
 
/* 针对 IE 11 */
.construct-dialog {
  overflow: auto;
}

::v-deep  .el-upload{
    width: 160px;
    height: 160px;
    line-height: 160px;
}
.termination-tips{
  color: rgba(0, 0, 0, .45);
  font-size: 14px;
}
.el-icon-delete{
  margin-left: 10px;
}
</style>